<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>主页</title>
    <link rel="stylesheet" href="../static/css/bootstrap.min.css">
    <link rel="stylesheet" href="../static/css/index.css">

    <style>
        /* 红心样式 */
        .like {
            float: left;
            margin-left: 38rem;
            background-position: 1rem 2rem;
            font-size: 22px;
            color: #ccc;
            cursor: pointer;
        }
        /* 红心颜色 */
        .cs {
            color: #f00;
        }
        /* 点赞样式 */
        .give{
            /* background-color: royalblue; */
            position: absolute;
            left: 38rem;
            top: 1.25rem;
        }
    </style>

</head>

<body>
    <div class="container">
        <!-- 头部 -->
        <div class="row">
            <div class="col-sm"></div>
            <div class="col-sm">
                <!-- 宽为50rem -->
                <div class="card" style="width: 50rem;">
                    <div class="card-header-1">
                        <div class="row" style="font-family: cursive;">

                            <h4 style="position: absolute; left: 0.5rem; margin-top: 0.5rem; font-family:cursive;">
                                我们在一起的空间</h4>

                            <!-- 头像框 -->
                            <div class="user-info">
                                <a class="user-home" type="file" onclick="my_photo()">
                                    <img class="user-avatar" src="../static/image/lisa3 (3).jpg" alt="您的头像">
                                    <!-- <span class="user-name textoverflow">老妖精</span> -->
                                    <!-- <span class="user-name textoverflow"><p>{{username}}</p></span> -->
                                </a>
                            </div>
                            <!-- 用户名样式 -->
                            <div class="col-sm-7 d-flex justify-content">
                                <p>{{username}}</p>
                            </div>
                            <!-- 按钮组件 -->
                            <div class="col-sm-5 d-flex justify-content-end ">
                                <button type="button" class="btn btn-secondary btn-sm shadow" data-toggle="modal"
                                    data-target="#closeAccount">注销</button>
                            </div>
                            <!-- 按钮组件 -->
                            <div class="col-sm-6 d-flex justify-content-start">
                                <button type="button" class="btn btn-success btn-sm" data-toggle="modal"
                                    data-target="#saysomething">发表说说</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm">

            </div>
        </div>

        <!-- 说说框 -->
        <div class="row" style="font-family: cursive;">
            <div class="col-sm">

            </div>
            <div class="col-sm" id="saysaymsg">
                {% for msg in msgs %}
                <div class="card border-primary shadow" style="width: 50rem;">
                    <div class="card-header">
                        <div class="row">
                            <!-- 头像框 -->
                            <div class="user-info">
                                <a class="user-home" type="file" onclick="my_photo()">
                                    <img class="user-avatar-1" src="../static/image/lisa3 (3).jpg" alt="您的头像">
                                </a>
                            </div>
                            <div class="col-sm-10">{{msg.content}}</div>
                            <!-- 点赞样式 -->
                            <p class="like">&#10084;</p>

                            <!-- 在html代码中写入类型为button类型按钮，并给一个id名为praise -->
                            <input class="give" type="button" id="praise" value="赞(0)">

                            <div class="col-sm-2">
                                <button type="button" style="margin-left: 1rem;" class="btn btn-success btn-sm"
                                    data-toggle="modal" data-target="#comment"
                                    onclick="sayComment('{{msg.id}}')">吐槽一下</button>
                            </div>
                        </div>
                    </div>

                    <!-- 评论框 -->
                    <div class="card-body">
                        <ul class="list-group list-group-flush" id="{{msg.id}}">
                            {% for comment in msg.comments %}
                            <li class="list-group-item">
                                <blockquote class="blockquote mb-0">
                                    <p>{{comment.content}}</p>
                                    <footer class="blockquote-footer">
                                        <cite title="Source Title">{{comment.comUserName}}</cite>&nbsp;&nbsp;对
                                        <cite title="Source Title">{{msg.msgUserName}}</cite>&nbsp;&nbsp;说
                                    </footer>
                                    <!-- <input class="give" type="button" id="praise" value="赞(0)"> -->
                                </blockquote>
                            </li>
                            {% endfor %}
                        </ul>
                    </div>
                </div>
                {% endfor %}
            </div>

            <div class="col-sm">

            </div>
        </div>
    </div>

    <!-- 注销  -->
    <div class="modal fade" id="closeAccount" data-backdrop="static" data-keyboard="false" tabindex="-1"
        style="font-family: cursive;" aria-labelledby="closeAccountLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title" id="closeAccountLabel">注销</h3>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body center">
                    <div class="form-group">
                        <label for="exampleFormControlTextarea1">
                            <h4>是否注销当前账户!</h4>
                        </label>
                    </div>
                </div>
                <!-- 按钮组件 -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-success" onclick="logout()">确认注销</button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">再想想</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 发表说说  -->
    <div class="modal fade" id="saysomething" tabindex="-1" style="font-family: cursive;"
        aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">发表说说</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="form-group">
                            <!-- <input type="text" class="form-control" aria-describedby="passwordHelpInline" id="sayMsg"> -->
                            <label for="sayMsg">说点儿什么吧...</label>
                            <textarea class="form-control" id="sayMsg" rows="3"></textarea>
                        </div>
                    </form>
                </div>
                <!-- 按钮组件 -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-success" data-dismiss="modal" onclick="saysay()">发表</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 吐槽一下 -->
    <div class="modal fade" id="comment" tabindex="-1" style="font-family: cursive;" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">吐槽一下</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="form-group">
                            <!-- <input type="text" class="form-control" aria-describedby="passwordHelpInline" id="commentMsg"> -->
                            <label for="exampleFormControlTextarea1">吐槽点儿什么吧...</label>
                            <textarea class="form-control" id="commentMsg" rows="3"></textarea>
                        </div>
                    </form>
                </div>
                <!-- 按钮组件 -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-success" data-dismiss="modal" onclick="comment()">吐槽</button>
                </div>
            </div>
        </div>
    </div>

    <script src="../static/js/jquery-3.5.1.min.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
    <script src="../static/js/bootstrap.min.js"></script>
    <!-- 点赞 -->
    <script typet="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>

    <script>
        // 保存当前说说的id
        let currentMsgId = '';
        function sayComment(msgId) {
            currentMsgId = msgId;
        }
        // 发表说说
        function saysay() {
            axios({
                method: 'post',
                url: '/say',
                data: {
                    sayMsg: $('#sayMsg').val()
                }
            }).then(function (response) {
                // axios工具下，服务器真正返回的数据在返回对象的data中
                let res = response.data;
                if (res.code === 200) {
                    // 根据服务返回的信息，拿到说说的信息，借助模板引擎，渲染这一段dom
                    let data = JSON.parse(res.data);
                    let html = `
                    <div class="card border-primary shadow" style="width: 50rem;">
                        <div class="card-header">
                            <div class="row">
                                <div class="col-sm-10">${data.content}</div>
                                <div class="col-sm-2"><button type="button" class="btn btn-secondary btn-sm"
                                    data-toggle="modal" data-target="#comment" onclick="sayComment(${data.id})">吐槽一下</button>
                                </div>
                            </div>
                        </div>
                        <div class="card-body">
                            <ul class="list-group list-group-flush" id="${data.id}">
                            </ul>
                        </div>
                    </div>
                `
                    // 将渲染好的这段dom，插入到指定id节点的内部最前面
                    $("#saysaymsg").prepend(html);

                    // window.location.href = '/login';
                }
            }).catch((err) => {

            });
        }
        // 吐槽一下
        function comment() {
            axios({
                method: 'post',
                url: '/comment',
                data: {
                    commentMsg: $('#commentMsg').val(),
                    msgId: currentMsgId
                },
            }).then(function (response) {
                // axios工具下，服务器真正返回的数据在返回对象的data中
                let res = response.data;
                if (res.code === 200) {
                    // 获得评论信息，渲染指定的dom片段
                    let data = res.data;
                    let html = `
                    <li class="list-group-item">
                        <blockquote class="blockquote mb-0">
                            <p>${data.content}</p>
                            <footer class="blockquote-footer">
                                <cite title="Source Title">${data.fromUserName}</cite>&nbsp;&nbsp;对
                                <cite title="Source Title">${data.toUserName}</cite>&nbsp;&nbsp;说
                            </footer>
                        </blockquote>
                    </li>
                    `;

                    // 将渲染好的dom片段，插入到指定id节点的最后面
                    $("#" + data.msgId).append(html);
                } else {
                    console.log('2000判断不通过');
                }
            }).catch((err) => {
                console.log(err);
            });
        }
        // 注销登录
        function logout() {
            axios({
                method: 'post',
                url: '/logout'
            }).then(function (response) {
                // axios工具下，服务器真正返回的数据在返回对象的data中
                let res = response.data;
                if (res.code === 200) {
                    window.location.href = '/login';
                }
            }).catch((err) => {

            });
        }
        //点赞红心
        $(function () {
            $(".like").click(function () {
                $(this).toggleClass('cs');
            })
        })
    </script>
    <!-- 点赞 -->
    <script type="text/javascript">
        function zan() {
            var number = 0;
            return function () {
                this.value = "赞(" + (++number) + ")";
            }
        }
        var zz = zan();
        document.getElementById('praise').onclick = zz;
    </script>
</body>

</html>